<script lang="ts" setup>
// @ts-ignore
import {getComments} from "~/server/comment.service";
// @ts-ignore
import emitter from "~/utils/mitt";

// 缓存评论发布类型
const commentStore = useCommentStore()
commentStore.type = 2
//在每个页面上覆盖布局
definePageMeta({
    layout: false,
})
const commentCount = ref(0)
const commentsList = ref([] as any)
const pageInfo = reactive({
    current: 1,
    size: 6
})

emitter.on('messageFetchComment', () => {
    pageInfo.current = 1
    getCommentList()
})
emitter.on('messageFetchReplies',async () => {
    await getCommentList()
})


function getCommentList() {
    const params = {
        type: 2,
        topicId: null,
        current: pageInfo.current,
        size: pageInfo.size
    }
    getComments(params).then(({data}: any) => {
        commentCount.value = data.data.count
        commentsList.value = data.data.records
    })
}
function nextPage() {
    if (pageInfo.current * pageInfo.size > commentCount.value){
        ElMessage.warning('暂无更多评论')
        return
    }
    pageInfo.current = pageInfo.current + 1
    getCommentList()
}
function prevPage() {
    if (pageInfo.current - 1 <= 0){
        ElMessage.warning('已是最新评论')
        return
    }
    pageInfo.current = pageInfo.current - 1
    getCommentList()
}
onMounted(() => {
    getCommentList()
})
</script>

<template>
    <NuxtLayout name="board">
        <template v-slot:main>
            <article class="hentry">
                <div class="entry-content">
                    <p>
                        一生中交一个朋友谓之足，交两个朋友谓之多，交三个朋友谓之难得
                        <br>
                        能遇到的同路人，哪怕只是陪伴一段时间，也都是赚到的。每个出现过的人，无论结局如何，我都心存感激
                    </p>
                </div>
            </article>
            <Commet :commentList="commentsList" :count="commentCount"/>
        </template>
        <template v-slot:other>
            <nav class="navigation page-navigation has-thyuu-color has-btn-effect">
                <div class="nav-next">
                    <a v-if="pageInfo.current !== 1" href="#main" class="button prev has-btn-effect" role="button" @click="prevPage">
                        <span class="btn-meta">上一页</span>
                    </a>
                    <a href="#main" @click="nextPage">
                        <span class="btn-meta">下一页</span>
                    </a>
                </div>
            </nav>
        </template>
    </NuxtLayout>
</template>

<style scoped>
.nav-next > a{
    margin-right:0.5rem;
}
.button.prev:not([class*="icon"])::after {
    content: "";
}
.button.prev:not([class*="icon"])::before {
    content: "\e623";
}
</style>
